<template>
  <component>
    <q-tree
      v-if='treeData !== undefined'
      :nodes="[treeData]"
      node-key="id"
      :default-expand-all='true'
      :tick-strategy='tickType'
      v-model:ticked="ticked"
      @update:ticked='$emit("update:ticked", $event)'
    >
      <template v-slot:default-header="prop">
        <div class="row items-center">
          <div class="text-weight-bold text-primary">{{ prop.node.label }}</div>
        </div>
      </template>
    </q-tree>
  </component>
</template>

<script lang='ts'>
import { defineComponent, PropType, ref, onMounted, watch } from 'vue';
import { TreeObj } from 'pages/tree/model/TreeObj';
export default defineComponent ({
  name: 'Tree',
  props: {
    treeData: {
      type: Object as PropType<TreeObj[]>,
    },
    tickeds: {
      type: [String]
    },
    tickType: {
      type: String
    }
  },
  setup (props, context) {

    let ticked = ref(props.tickeds === undefined ? [] : props.tickeds)
    return {
      ticked
    }
  }
});
</script>

<style scoped>

</style>
